import React, { Component } from 'react'
import propTypes from 'prop-types'
import './style.css'

export class TabControl extends Component {
  static propTypes = {
    changeIndex: propTypes.func.isRequired,
  }

  constructor(props) {
    super(props)

    this.state = {
      currentIndex: 0,
    }
  }

  changeIndexClick(index) {
    this.setState({
      currentIndex: index,
    })
    this.props.changeIndex(index)
  }

  render() {
    const { titles, itemType } = this.props
    const { currentIndex } = this.state

    return (
      <div className="tab-control">
        {titles.map((title, index) => (
          <div
            // className={index === currentIndex ? 'active item' : 'item'}
            className={`item ${index === currentIndex ? 'active' : ''}`}
            key={index}
            onClick={() => this.changeIndexClick(index)}
          >
            {/* <span className="text">{title}</span> */}
            {itemType(title)}
          </div>
        ))}
      </div>
    )
  }
}

export default TabControl
